
import React,{Component} from "react";
import { Select, Button, DatePicker, message, Form} from "antd";
import { withRouter } from "react-router-dom";
import moment from "moment";
import ajax from '../../ajaxMethod';

class HistoryBook extends Component{
    constructor(props){
        super(props);
        this.state = {
            username:localStorage.getItem("username"),
            data:[],
        }
    }
    componentDidMount(){
        this.getList();
    }
    getList = (type) =>{
        let values = this.props.form.getFieldsValue(), _this = this;

        console.log("this.props.form.getFieldsValue()", values);
        if(type){
            values.type = type;
        }
        if(values.begin){
            values.begin = values.begin.format("YYYY-MM-DD 00:00");
        }
        if(values.end){
            values.end = values.end.format("YYYY-MM-DD 23:59");
        }
        ajax.getAjax("/interface/historyList", {
            ...values,
            username: this.state.username,
        }, res=>{
            if(res.success){
                console.log("成功",res);
                _this.setState({data:res.data})
            }else{
                console.error(res.description);
            }
        }, err=>{
            console.error(err);
        });
    }
    typeChange = (type) =>{
        this.getList(type);
    }
    deleteOrder = (e) =>{
        let id = e.target.getAttribute("data-id"), 
            values = {}, 
            data = this.state.data,
            _this = this;
        for(let i = 0; i < data.length; i++){
            if(data[i]._id === id){
                values = data[i];
                break;
            }
        }
        if(Object.keys(values).length){
            ajax.postAjax("/interface/deleteOrder",{values: values}, res=>{
                if(res.success){
                    message.success("删除成功");
                    _this.getList();
                }else{
                    message.error(res.description);
                }
            }, err=>{
                console.error(err);
            })
        }else{
            message.error("前端找不到要删除的数据");
        }
    }
    onPay = (e) =>{//跳转到支付页面。//先检测用户行程是否冲突
        let id = e.target.getAttribute("data-id"),
            _this = this;
        
        ajax.getAjax("/interface/getDataAndInitalValues",{ id: id}, res=>{
            if(res.success){
                if(res.data.state === 0){//不冲突，跳转到支付页面。
                    _this.props.history.push({
                        pathname:"/bookThird",
                        values: {...res.data.data, submiteTime: new Date()}
                    });
                }else{//冲突
                    message.error("有乘客行程冲突");
                }
            }else{
                console.error(res.description);
                message.error(res.description);
            }
        })
    }
    unsubscribe = (e) =>{//退订
        let id = e.target.getAttribute("data-id"),
            _this = this;

        ajax.getAjax("/interface/getUnsubscribeValues",{ id: id}, res=>{
            if(res.success){//不用进行冲突检测的 
                _this.props.history.push({
                    pathname:"/unsubscribe",
                    values: {...res.data}
                });
            }else{
                console.error(res.description);
                message.error(res.description);
            }
            })
    }
    submit = (e) =>{
        //查询
        this.getList();
        e.preventDefault();
    }
    disabledBeginDate = (current) =>{
        let endDate = this.props.form.getFieldValue("end");
        if(endDate){ return current.format('YYYY-MM-DD') >= endDate.format("YYYY-MM-DD"); }
    }
    disabledEndDate = (current) =>{
        let beginDate = this.props.form.getFieldValue("begin");
        if(beginDate){ return current.format('YYYY-MM-DD') <= beginDate.format("YYYY-MM-DD"); }
    }
    render(){
        console.log("state", this.state);
        let state = this.state;
        const { getFieldProps, getFieldValue, setFieldValue} = this.props.form;
        return(
        <div className="history-order">
            <div className="search-box">
                <Form layout="inline" onSubmit={this.submit}>
                    <Form.Item>
                        <Select className="type"
                            {...getFieldProps('type',{
                                initialValue: "0",
                                onChange: this.typeChange
                            })}>
                            <Select.Option value="0">全部订单</Select.Option>
                            <Select.Option value="1">已出行</Select.Option>
                            <Select.Option value="2">未出行</Select.Option>
                            <Select.Option value="3">待支付</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <DatePicker disabledDate={this.disabledBeginDate} 
                            {...getFieldProps('begin', {
                                 rules: [ {required: false},{type:"object"}],
                            })}
                            >
                        </DatePicker>
                    </Form.Item>
                    <span className="fonts-r">到</span>
                    <Form.Item>
                        <DatePicker disabledDate={this.disabledEndDate} 
                            {...getFieldProps('end', {
                                rules: [ {required: false},{type:"object"}],
                            })}></DatePicker>
                    </Form.Item>
                    <Button style={{marginTop:"3px"}}  htmlType="submit">查询</Button>
                    <span className="fonts-l">提示：日期优先于类型选择</span>
                </Form>
            </div>
            <div className="items">
                {
                    (()=>{
                        let data = state.data;
                        if(data.length){
                            return data.map((v,index,arr)=>{
                                return (
                                <div className="item">
                                    <div>
                                        <p><span>状态：{(()=>{
                                            let state = "完成";
                                            switch(v.state){
                                                case 0: state = "待支付";break;
                                                case 1: state = "待支付";break;
                                                case 2: state = "完成";break;
                                                case 3: state = "完成";break;
                                                case 4: state = "已退订";break;
                                            }
                                            return state;
                                        })()}</span></p>
                                        <p><span>订单号：{v.orderNumber}</span></p>
                                        <p><span>预定时间：{moment(Number(v.ticketingTime)).format("YYYY-MM-DD HH:mm")}</span></p>
                                        <p><span>乘客：{(()=>{
                                            let names = "", passenger = v.passenger;
                                            for(let i = 0; i < passenger.length; i++){
                                                if(i === 0) names += passenger[i].name;
                                                else names += "、" +  passenger[i].name;
                                            }
                                            return names;
                                        })()}</span></p>
                                    </div>
                                    <div>
                                        <p><span>航程：{v.start.city}-{v.end.city}</span></p>
                                        <p><span>出发时间：{v.start.time}</span></p>
                                        <p><span>到达时间：{v.end.time}</span></p>
                                        <p><span>航班所属公司：{v.company}</span></p>
                                    </div>
                                    <div>
                                        <p><span>舱型：{v.classType === 0?"经济舱":v.type === 1?"商务舱":"头等舱"}</span></p>
                                        <p><span>支付方式：{v.payWay === 0?"支付宝":"微信"}</span></p>
                                        <p><span>总金额：{(()=>{
                                            let sumPrice = 0, passenger = v.passenger;
                                            for(let i = 0; i < passenger.length; i++){
                                                sumPrice += passenger[i].price;
                                            }
                                            return sumPrice;
                                        })()}</span></p>
                                    </div>
                                    {(()=>{
                                            let divs = <div className="opt"></div>;
                                            switch(v.state){
                                                case 0: divs = <div className="opt">
                                                    <p><a onClick={this.deleteOrder} data-id={v._id}>删除订单</a></p>
                                                    <p><a onClick={this.onPay} data-id={v._id}>继续支付</a></p>
                                                </div>;break;
                                                case 1: divs = <div className="opt">
                                                    <p><a onClick={this.deleteOrder} data-id={v._id}>删除订单</a></p>
                                                    {
                                                        moment(v.start.time).format("YYYY-MM-DD HH:mm") > moment().format("YYYY-MM-DD HH:mm")?
                                                        <p ><a onClick={this.onPay} data-id={v._id}>继续支付</a></p>:[]
                                                    }
                                                </div>;break;
                                                case 2: divs = <div className="opt">
                                                    {
                                                        moment(v.start.time).format("YYYY-MM-DD HH:mm") > moment().format("YYYY-MM-DD HH:mm")?
                                                        <p><a  onClick={this.unsubscribe} data-id={v._id}>我要退票</a></p>:
                                                        <p><a onClick={this.deleteOrder} data-id={v._id}>删除订单</a></p>
                                                    }
                                                </div>;break;
                                                case 3: divs = <div className="opt">
                                                    {
                                                        moment(v.start.time).format("YYYY-MM-DD HH:mm") > moment().format("YYYY-MM-DD HH:mm")?
                                                        <p><a onClick={this.unsubscribe} data-id={v._id}>我要退票</a></p>:
                                                        <p><a onClick={this.deleteOrder} data-id={v._id}>删除订单</a></p>
                                                    }
                                                </div>;break;
                                                case 4: divs = <div className="opt">
                                                    <p><a onClick={this.deleteOrder} data-id={v._id}>删除订单</a></p>
                                                </div>;break;
                                            }
                                            return divs;
                                        })()
                                    }
                                </div>);
                            })
                        }else{
                            return <div className="null"><p>没有数据</p></div>
                        }
                    })()
                }
            </div>
        </div>)
    }
}

export default withRouter(Form.create({})(HistoryBook));

